<template>
	<view class="chongzhi">
		<view class="header">
			<image src="../../static/icon/icon_back.png" @click="goBack"></image>
			<view>水晶充值</view>
			<view></view>
		</view>

		<view class="inp">
			<view class="title">
				请输入充值金额
			</view>
			<view class="flex">
				<text style="font-size: 60upx;">￥</text>
				<input placeholder="最低充值金额 100人民币" class="inpt" v-model="money"></input>
			</view>
		</view>
		<view class="btn" @click="btn">
			确定
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				money: ''
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			async btn() {
				if (this.money == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入充值金额！'
					})
					return
				}
				if (this.money < 100 && this.money != 0.01) {
					uni.showToast({
						icon: 'none',
						title: '充值金额不能小于100！'
					})
					return
				}
				this.userInfos = uni.getStorageSync('userInfos') || '';
				let uid = this.userInfos.id;
				let params = {
					amount: this.money,
					memberId: uid
				}
				let res = await Api.apiCall('get', 'aliPay/recharge', params);
				//console.log(res)
				this.alipay(res)
			},
			alipay(res) {
				uni.requestPayment({
					provider: "alipay",
					orderInfo: res,
					success: function(data) {
						//console.log(data);
						this.$common.successToShow('支付成功', () => {
							// _this.redirectHandler(res.data.payment_id)
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background-color: #FFFFFF;
	// }
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100upx;
		text-align: center;
		background-color: #1D82FE;
		color: #FFFFFF;

		image {
			margin-left: 30upx;
			width: 40upx;
			height: 40upx;
		}
	}

	.inp {
		width: 90%;
		height: 200upx;
		margin: 40upx auto;
		background-color: #FFFFFF;
		border-radius: 30upx;
		box-shadow: 0upx 0upx 8upx 1upx rgba(0, 0, 0, .1);
		padding: 30upx;

		.title {
			margin-bottom: 40upx;
		}

		.flex {
			display: flex;
			justify-content: left;
			align-items: center;
		}
	}

	.btn {
		width: 90%;
		height: 80upx;
		line-height: 80upx;
		font-size: 40upx;
		color: #FFFFFF;
		text-align: center;
		margin: 30upx auto;
		border-radius: 50upx;
		background-color: #AE1D24;
	}
</style>
